<!-- 模块管理 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模块管理</title>
  <meta name="keywords" content="">
  <meta name="description" content="">

  <link rel="shortcut icon" href="favicon.ico">
  <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
  <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
  <link href="../css/animate.css" rel="stylesheet">
  <link rel="stylesheet" href="../tree/css/zTreeStyle/zTreeStyle.css" type="text/css">

  <link rel="stylesheet" type="text/css" href="../tree_grid/themes/default/easyui.css">
  <link rel="stylesheet" type="text/css" href="../tree_grid/themes/icon.css">
  <link rel="stylesheet" type="text/css" href="../tree_grid/demo.css">
  <script type="text/javascript" src="../tree_grid/jquery.min.js"></script>
  <script type="text/javascript" src="../tree_grid/jquery.easyui.min.js"></script>
  <script type="text/javascript" src="../tree/js/jquery.ztree.core-3.5.js"></script>
  <script type="text/javascript" src="../tree/js/jquery.ztree.excheck-3.5.js"></script>
  <script type="text/javascript" src="../mock/mock-min.js"></script>
  <script src="../js/bootstrap.min.js?v=3.3.6"></script>
  <script src="../js/plugins/footable/footable.all.min.js"></script>
  <script src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
  <script src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

  <!-- 自定义js、css -->
  <link rel="stylesheet" href="../css/labMgt/modal.css">
</head>

<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="basel-form" style="margin: 10px 0;">
      <button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#chooseMixture">关联权限</button>
    </div>

    <table id="treegrid" title="模块管理" class="easyui-treegrid" style="width:100%;height:300px"
      data-options="
        url: '',
        method: 'get',
        rownumbers: true,
        idField: 'id',
        treeField: 'name',
        onContextMenu: onContextMenu
      ">
      <thead>
        <tr>
          <th data-options="field:'name'" width="50%">模块名称</th>
          <th data-options="field:'type'" width="20%" align="center">模块功能</th>
          <th data-options="field:'reason'" width="30%" align="center">说明</th>
        </tr>
      </thead>
    </table>
    <div id="treegrid_menu" class="easyui-menu" style="width:120px;">
      <div data-toggle="modal" data-target="#addForm">新增节点</div>
      <div >新增子节点</div>
      <div class="menu-sep"></div>
      <div>向上移到</div>
      <div >向上移到</div>
      <div class="menu-sep"></div>
      <div>编辑节点</div>
      <div>删除节点</div>
    </div>
  </div>

  <!-- 关联权限 start -->
  <div class="modal fade" id="chooseMixture" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title" id="myModalLabel">关联权限</h5>
        </div>
        <div class="modal-body modal-ztree">
          <ul class="nav nav-tabs">
            <li class="active" data-toggle="#modal-page">
              <a >页面权限配置</a>
            </li>
            <li data-toggle="#modal-rest">
              <a>接口权限配置</a>
            </li>
          </ul>

          <div id="modal-page" data-toggle="#treegrid-page">
            <ul id="treegrid-page" class="ztree"></ul>
          </div>

          <div id="modal-rest" data-toggle="#treegrid-rest">
            <ul id="treegrid-rest" class="ztree"></ul>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 关联权限 end -->

  <!-- 新增节点 addForm start-->
  <div class="modal fade" id="addForm" role="dialog"
    aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h5 class="modal-title" id="myModalLabel">新增模块</h5>
        </div>
        <div class="modal-body">
          <form>
            <table class="form-table">
              <tbody>
                <tr>
                  <td class="title">模块名称：</td>
                  <td><input name="username" type="text"><b>*</b></td>
                </tr>
                <tr>
                  <td class="title">模块类型：</td>
                  <td>
                    <select id="">
                      <option>请选择</option>
                      <option value="1">模块</option>
                      <option value="0"></option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="title">父模块：</td>
                  <td>
                    <select id="">
                      <option>请选择</option>
                      <option value="1">模块</option>
                      <option value="0"></option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td class="title">描述：</td>
                  <td><textarea name="note" type="text"></textarea></td>
                </tr>
              </tbody>
            </table>
          </form>          
        </div>
        <div class="modal-footer">
          <div class="text-center col-sm-12">
            <button class="btn btn-sm btn-info" type="submit">查 询</button>
            <button class="btn btn-sm btn-white" data-dismiss="modal">取 消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 新增节点 end -->

  <ul id="treegrid-rest" class="ztree"></ul>
  <ul id="treegrid-page" class="ztree"></ul>

  <script type="text/javascript">

    var setting = {
      check: {
        enable: true
      },
      data: {
        simpleData: {
          enable: true
        }
      }
    };

    var zNodes =[
      { name:"父节点1 - 展开", open:true,
        children: [
          { name:"父节点11 - 折叠",open:true,
            children: [
              { name:"叶子节点111"},
              { name:"叶子节点112"},
              { name:"叶子节点113"},
              { name:"叶子节点114"}
            ]},
          { name:"父节点12 - 折叠",open:true,
            children: [
              { name:"叶子节点121"},
              { name:"叶子节点122"},
              { name:"叶子节点123"},
              { name:"叶子节点124"}
            ]},
          { name:"父节点13 - 没有子节点", isParent:true}
        ]},
      { name:"父节点2 - 折叠",open:true,
        children: [
          { name:"父节点21 - 展开", open:true,
            children: [
              { name:"叶子节点211"},
              { name:"叶子节点212"},
            ]},
          { name:"父节点22 - 折叠",open:true,
            children: [
              { name:"叶子节点221"},
              { name:"叶子节点222"},
            ]},
          { name:"父节点23 - 折叠",open:true,
            children: [
              { name:"叶子节点231"},
              { name:"叶子节点234"}
            ]}
        ]}
    ];

    function init(){
      var li_list = $(".nav-tabs li");
      $.each(li_list,function(index,item){
        var id = $(item).attr("data-toggle");
        $(id).hide();
        if($(item).hasClass("active")){
          $(id).show();
        };
      });      
    }
    init();
    $(".nav-tabs li").click(function(){
      $(this).addClass("active");
      $(this).siblings().removeClass("active");
      init();
      var showTreeId = $($(this).attr("data-toggle"));
      if ($(this).hasClass('active')) {
        $.fn.zTree.init($($(showTreeId).attr("data-toggle")), setting, zNodes);
      }
    });
    
    var data  = [{
      id:1,
      name:"人员定位",
      type:"模块",
      reason:"",
      children:[{
        id:21,
        name:"查询电子围栏列表",
        type:"功能按钮",
        reason:"",
      },{
        id:22,
        name:"查询标段下围栏",
        type:"模块",
        reason:"",
      },{
        id:23,
        name:"查询标段下围栏",
        type:"模块",
        reason:"",
      },]
    }];

    $(document).ready(function(){
      $('#treegrid').treegrid("loadData",data);  
    });

    function onContextMenu(e,row){
      if (row) {
        e.preventDefault();
        $(this).treegrid('select', row.id);
        $('#treegrid_menu').menu('show',{
          left: e.pageX,
          top: e.pageY
        });                
      }
    };

    $('#chooseMixture').on('shown.bs.modal', function () {
      // 执行一些动作...
      var showId = $(".nav-tabs li").attr("data-toggle");
      if ($(".nav-tabs li").hasClass('active')) {
        $.fn.zTree.init($($(showId).attr("data-toggle")), setting, zNodes);
      }
  
    });

  </script>
</body>

</html>